var myStore = Ext.create('PC.store.UserStore');
var myfilter = new Ext.util.Filter({
    property: 'first',
    value: 'eri',
    anyMatch: true,
    caseSensitive: false,
    root: 'users'
});

Ext.define('PC.view.content.UserFilterPanel', {
	extend : 'Ext.form.Panel',
	
    /**
     * @private
     * search value initialization
     */
    searchValue: null,
	alias : 'widget.userfilter',
	width : 175,
	height : 120,
	bodyPadding : 10,
	
	items : [ {
		xtype : 'textfield',
		fieldLabel : 'First Name',
		name : 'First',
		value : '',
		listeners: {
            change: {
                scope: this,
                buffer: 100
            }
        }
	}, {
		xtype : 'textfield',
		fieldLabel : 'Last Name',
		name : 'Last',
		value : ''
	} ],
	buttons : [ {
		text : 'Filter',
		handler : function() {
			myStore.filter('erica');
			myStore.sync();
		}
	}, {
		text : 'Clear',
		handler : function() {
			myStore.sync();
		}
	} ],
	
//	 inits
	initComponent : function() {
		Ext.apply(this, {
			title : ':. Filter .:',
			store : myStore
//			model : 'FilterModel'
//			itemSelector : 'div.post-wrap',
//			tpl : new Ext.XTemplate('<tpl for=".">',
//					'<div style="margin-bottom: 10px;" class="post-wrap">',
//					'<h2>{title}</h2>', '<p>{content}</p>', '</div>', '</tpl>')
		});
		this.callParent(arguments);
//		this.store.load();
	}, 
    
	 // detects html tag
    tagsRe: /<[^>]*>/gm,
    
    // DEL ASCII code
    tagsProtect: '\x0f',
    
	regExpProtect: /\\|\/|\+|\\|\.|\[|\]|\{|\}|\?|\$|\*|\^|\|/gm,
	
    onTextFieldChange: function() {
        var me = this,
            count = 0;

        me.searchValue = me.getSearchValue();
        me.indexes = [];
        me.currentIndex = null;

        if (me.searchValue !== null) {
            me.searchRegExp = new RegExp(me.searchValue, 'g' + 'i');
            
            
            me.store.each(function(record, idx) {
//                var td = Ext.fly(me.view.getNode(idx)).down('td'),
//                    cell, matches, cellHTML;
//                while(td) {
//                    cell = td.down('.x-grid-cell-inner');
//                    matches = cell.dom.innerHTML.match(me.tagsRe);
//                    cellHTML = cell.dom.innerHTML.replace(me.tagsRe, me.tagsProtect);
//                    
//                    // populate indexes array, set currentIndex, and replace wrap matched string in a span
//                    cellHTML = cellHTML.replace(me.searchRegExp, function(m) {
//                       count += 1;
//                       if (Ext.Array.indexOf(me.indexes, idx) === -1) {
//                           me.indexes.push(idx);
//                       }
//                       if (me.currentIndex === null) {
//                           me.currentIndex = idx;
//                       }
//                       return '<span class="' + me.matchCls + '">' + m + '</span>';
//                    });
//                    // restore protected tags
//                    Ext.each(matches, function(match) {
//                       cellHTML = cellHTML.replace(me.tagsProtect, match); 
//                    });
//                    // update cell html
//                    cell.dom.innerHTML = cellHTML;
//                    td = td.next();
//                }
            } , me);

            // results found
            if (me.currentIndex !== null) {
//                me.getSelectionModel().select(me.currentIndex);
               
            }
        }

        // no results found
        if (me.currentIndex === null) {
//            me.getSelectionModel().deselectAll();
        }

        // force textfield focus
        me.textField.focus();
    },
    
    /**
     * In normal mode it returns the value with protected regexp characters.
     * In regular expression mode it returns the raw value except if the regexp is invalid.
     * @return {String} The value to process or null if the textfield value is blank or invalid.
     * @private
     */
    getSearchValue: function() {
        var me = this,
            value = me.textField.getValue();
            
        if (value === '') {
            return null;
        }
        if (!me.regExpMode) {
            value = value.replace(me.regExpProtect, function(m) {
                return '\\' + m;
            });
        } else {
            try {
                new RegExp(value);
            } catch (error) {
                return null;
            }
            if (value === '^' || value === '$') {
                return null;
            }
        }

        return value;
    }

});
